<!DOCTYPE html>
<html lang="en">

<head>
    <!-- #include file="../com/link.asp" -->
    <script src="../js/echarts.min.js"></script>
</head>

<body class="backCol">
    <!-- #include file="./header.asp" -->
    <div class="statistics m1400">
        <div class="head">
            <button type="button" class="layui-btn">报表下载</button>
            <h5>概念部分</h5>
        </div>
        <div class="canvas flexs flexsBet">
            <div class="canvasList">
                <div style="justify-content: flex-end;" class="title flexs">
                    <img src="../images/icon23.png" alt="">
                    <p>9分制/7分制</p>
                </div>
                <div id="main" class="main"></div>
            </div>
            <div class="canvasList">
                <div class="title flexs">
                    <img src="../images/icon24.png" alt="">
                    <p>概念总体喜好度(%)</p>
                </div>
                <div class="staisticsTableLi flexs">
                    <span>Base<br>Mean</span>
                    <span>200<br>6.61</span>
                    <span>200<br>6.61</span>
                    <span>200<br>6.61</span>
                </div>
                <table class="layui-table staisticsTable" lay-even lay-skin="nob">
                    <tr>
                        <th style="background: #f9bf06;" colspan="2" rowspan="3">概念</th>
                        <th style="background: #16bcc5;" colspan="6">整体喜好度</th>
                    </tr>
                    <tr style="background: #1987fc;">
                        <th colspan="2">概念ny</th>
                        <th colspan="2">概念PD</th>
                        <th colspan="2">概念HK</th>
                    </tr>
                    <tr style="background: #ff6167;">
                        <th>T3B%</th>
                        <th>T2B%</th>
                        <th>T3B%</th>
                        <th>T2B%</th>
                        <th>T3B%</th>
                        <th>T2B%</th>
                    </tr>
                    <tr>
                        <td colspan="2">总体</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td rowspan="2">S1性别</td>
                        <td>男性</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td>女性</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td rowspan="2">S2年龄</td>
                        <td>23-25岁</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td>23-25岁</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td rowspan="2">S3引用频率</td>
                        <td>中频（每周1-3次）</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                    <tr>
                        <td>低频（每月1-3次）</td>
                        <td>14.0</td>
                        <td>57.3</td>
                        <td>14.0</td>
                        <td>57.0</td>
                        <td>14.0</td>
                        <td>14.0</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="canvas">
            <div class="canvasTitle flexs">
                <img src="../images/icon24.png" alt="">
                <p>概念喜欢的方面(%)</p>
            </div>
            <div class="flexs flexsBet">
                <div class="canvasList">
                    <div id="main1" class="main"></div>
                </div>
                <div style="margin-top: 20px;" class="canvasList">
                    <table class="layui-table staisticsTable staisticsTables" lay-even lay-skin="nob">
                        <tr>
                            <th style="background: #f9bf06;" rowspan="2"></th>
                            <th style="background: #16bcc5;" colspan="7">
                                <div style="justify-content: space-around;width:100%" class="flexs">
                                    <span>S1性别</span>
                                    <span>S2性别</span>
                                    <span>S食用频次</span>
                                </div>
                            </th>
                        </tr>
                        <tr style="background: #1987fc;">
                            <th>男</th>
                            <th>女</th>
                            <th>18-22岁</th>
                            <th>23-25岁</th>
                            <th>高频</th>
                            <th>中频</th>
                            <th>低频</th>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr>
                            <td>没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切没有</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>
                        <tr class="col" style="background: #ff6167;">
                            <td>以上均无</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>57.3</td>
                            <td>14.0</td>
                            <td>57.0</td>
                            <td>14.0</td>
                            <td>14.0</td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>


        <div class="canvas flexs flexsBet">
            <div class="canvasList">
                <div style="justify-content: center;" class="title flexs">
                    <img src="../images/icon24.png" alt="">
                    <p>概念喜欢的原因(%)</p>
                </div>
                <canvas id="wordcloud" class="main"></canvas>
            </div>
            <div class="canvasList">
                <div style="justify-content: center;" class="title flexs">
                    <img src="../images/icon24.png" alt="">
                    <p>概念不喜欢的原因(%)</p>
                </div>
                <canvas id="wordcloud1" class="main"></canvas>
            </div>
        </div>

        <div class="canvas">
            <div class="canvasTitle flexs">
                <img src="../images/icon24.png" alt="">
                <p>概念总体偏好度(%)</p>
            </div>
            <div class="flexs flexsBet">
                <div style="width: 100%;" class="canvasList">
                    <div style="width: 100%;" id="main2" class="main"></div>
                </div>
            </div>
        </div>


        <div class="canvas flexs flexsBet">
            <div class="canvasList">
                <div style="justify-content: center;" class="title flexs">
                    <img src="../images/icon25.png" alt="">
                    <p>口味HK%</p>
                </div>
                <div style="margin-top:40px" id="main3" class="main"></div>
            </div>
            <div class="canvasList">
                <div style="justify-content: center;" class="title flexs">
                    <img src="../images/icon25.png" alt="">
                    <p>口味HK%</p>
                </div>
                <div style="margin-top:40px" class="bj">
                    <div id="main4" class="main"></div>
                </div>
            </div>
        </div>

        <div class="canvas">
            <div class="canvasTitle flexs">
                <img src="../images/icon26.png" alt="">
                <p>价格部分(%)</p>
            </div>
            <div class="flexs flexsBet">
                <div style="width: 930px; margin: 30px auto;" class="canvasList">
                    <div style="width: 100%; margin-bottom: 30px;" id="main5" class="main"></div>
                    <table style="border: 0;border-top: 2px solid #000;" class="layui-table layui-tableBor" lay-skin="line">
                        <tr>
                            <th></th>
                            <th>物有所值（元）</th>
                            <th>稍高人会买（元）</th>
                            <th>太高不会买（元）</th>
                            <th>太低怀疑质量（元）</th>
                        </tr>
                        <tr>
                            <td>均值</td>
                            <td>4.85</td>
                            <td>6.85</td>
                            <td>5.85</td>
                            <td>7.85</td>
                        </tr>
                        <tr style="color: #ba0000;">
                            <td>去掉5%极值后均值</td>
                            <td>4.72</td>
                            <td>6.85</td>
                            <td>5.85</td>
                            <td>7.85</td>
                        </tr>
                        <tr>
                            <td>中位数均值</td>
                            <td>4.85</td>
                            <td>6.85</td>
                            <td>5.85</td>
                            <td>7.85</td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="../js/wordcloud2.js"></script>
<script>

    var chartDom = document.getElementById('main');

    var myChart = echarts.init(chartDom);

    myChart.setOption({
        color: ['#1987fc', '#16bcc5', '#f9bf06'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['T3B%', 'T2B%', 'T1B%']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            show: false,
            data: ['T3B%', 'T2B%', 'T1B%']
        },
        yAxis: {
            type: 'value',
            show: false,
        },
        series: [
            {
                name: 'T3B%',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301]
            },
            {
                name: 'T2B%',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101]
            },
            {
                name: 'T1B%',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191]
            },
        ]
    });

    var chartDom1 = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom1);
    myChart1.setOption({
        color: ['#f9bf06'],
        grid: {
            left: 180
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['以上均无', '没有油腻的负担，这舒爽，这', '没有油', '没有油腻的负担，这舒爽的滋味让你感受到生活的踏实和贴切', '没有爽的滋味让你感受到生活的踏实和贴切', '没有油腻的负担，这舒爽的滋味和贴切', '没有油贴切'],

            axisLabel: {
                formatter: function (params) {
                    let str = params;
                    if (params.length > 27)
                        str = params.substr(0, 24) + '...'
                    var newParamsName = ""; // 最终拼接成的字符串
                    var paramsNameNumber = str.length; // 实际标签的个数
                    var provideNumber = 14; // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                    /**
                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                     */
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                        /** 循环每一行,p表示行 */
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = ""; // 表示每一次截取的字符串
                            var start = p * provideNumber; // 开始截取的位置
                            var end = start + provideNumber; // 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p == rowNumber - 1) {
                                // 最后一次不换行
                                tempStr = str.substring(start, paramsNameNumber);
                            } else {
                                // 每一次拼接字符串并换行
                                tempStr = str.substring(start, end) + "\n\n";
                            }
                            newParamsName += tempStr; // 最终拼成的字符串
                        }

                    } else {
                        // 将旧标签的值赋给新标签
                        newParamsName = str;
                    }
                    //将最终的字符串返回
                    return newParamsName
                }
            }
        },
        series: [
            {
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230, 530230]
            }
        ]
    })

    var wordFreqData = [['各位观众', 30], ['词云', 21], ['来啦!!!', 13]];
    var canvas = document.getElementById('wordcloud');
    var options = eval({
        "list": wordFreqData,//或者[['各位观众',45],['词云', 21],['来啦!!!',13]],只要格式满足这样都可以
        "gridSize": 5, // 密集程度 数字越小越密集
        "weightFactor": 1, // 字体大小=原始大小*weightFactor
        "color": 'random-dark', // 字体颜色 'random-dark' 或者 'random-light'
        "backgroundColor": '#fff', // 背景颜色
    });
    //生成
    WordCloud(canvas, options);

    var wordFreqData1 = [['各位观众', 30], ['词云', 21], ['来啦!!!', 13]];
    var canvas1 = document.getElementById('wordcloud1');
    var options = eval({
        "list": wordFreqData1,//或者[['各位观众',45],['词云', 21],['来啦!!!',13]],只要格式满足这样都可以
        "gridSize": 5, // 密集程度 数字越小越密集
        "weightFactor": 1, // 字体大小=原始大小*weightFactor
        "color": 'random-dark', // 字体颜色 'random-dark' 或者 'random-light'
        "backgroundColor": '#fff', // 背景颜色
    });
    //生成
    WordCloud(canvas1, options);

    //概念总体偏好度(%)
    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    myChart2.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '75%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '概念PD' },
                    { value: 735, name: '概念NY' },
                    { value: 580, name: '概念Hk' },
                ]
            }
        ]
    })

    //口味HK% 
    var chartDom3 = document.getElementById('main3');

    var myChart3 = echarts.init(chartDom3);

    myChart3.setOption({
        color: ['#f9bf06', '#1987fc', '#16bcc5'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['太浓/太甜', '正好', '太淡/太酸']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['闻起来的味道', '水果味', '酸甜度', '余韵（回味）']
        },
        series: [
            {
                name: '太浓/太甜',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134]
            },
            {
                name: '正好',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234]
            },
            {
                name: '太淡/太酸',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [150, 212, 201, 154]
            },
        ]
    });

    var data = [
        [[500, 300, 17096869, '水果味太浓'], [2000, 105.4, 27662440, '水果味太蛋'], [1650, 235.4, 27662440, '水果味太蛋'], [1558, 200.4, 27662440, '水果味太蛋'], [1242, 365.4, 27662440, '水果味太蛋'], [1355, 654.4, 27662440, '水果味太蛋'], [1238, 166.4, 27662440, '水果味太蛋'], [1856, 154.4, 27662440, '水果味太蛋'], [1654, 321.4, 27662440, '水果味太蛋']]
    ];
    //口味HK% 
    var chartDom4 = document.getElementById('main4');

    var myChart4 = echarts.init(chartDom4);

    myChart4.setOption({
        color: ['#ff0000'],
        xAxis: {

        },
        yAxis: {

            scale: true
        },
        grid: {
            left: '0',
            top: '10',
            right: '80',
            containLabel: true
        },
        series: [
            {

                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                emphasis: {
                    focus: 'self'
                },

                labelLine: {
                    show: true,
                    length2: 5,
                    lineStyle: {
                        color: '#bbb'
                    }
                },
                label: {
                    show: true,
                    formatter: function (param) {
                        return param.data[3];
                    },
                    position: 'right',
                    minMargin: 2
                }
            }]
    });


    //价格部分
    var chartDom5 = document.getElementById('main5');

    var myChart5 = echarts.init(chartDom5);

    myChart5.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['物有所值', '太高不会买', '稍高会买', '太低怀疑质量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [0, 2, 4, 6, 8, 10, 12],

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '物有所值',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210, 210],
            },
            {
                name: '太高不会买',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310],
               
            },
            {
                name: '稍高会买',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410],
               
            },
            {
                name: '太低怀疑质量',
                type: 'line',
                stack: '总量',
                data: [320, 332, 301, 334, 390, 330, 320],
                
            }
        ]
    });

</script>

</html>